﻿@using FTBS.Models.Entities
@model List<FTBS.Models.Entities.Film>
@{
    ViewBag.Title = "Phim đang chiếu";
    Layout = "~/Views/Shared/_Layout.cshtml";
    List<Format> formats = ViewBag.Formats;
}
<style>
    .filmkind {
        padding: 5px;
        font-size: 27px;
        background-color: rgb(83, 141, 160);
        color: white;
    }
</style>
<div>
    <div class="panel" style="background-color:white; background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%; height: 100%; min-height:485px">
        <div class="container">
            <div class="filmkind">
                <span">Phim đang chiếu
                </span>
                <span style="float:right;margin-right:10px;">
                    <button class="warning filter-trigger" data-filterclass="film-item" style="height: 25px; font-size: 12px; padding-top:0px ; margin-top:-8px">Tất cả</button>                  
                    @foreach (var format in formats)
                    { 
                       <button class="warning filter-trigger" data-filterclass="filter-@format.FormatName.ToLower()" style="height: 25px; font-size: 12px; padding-top:0px ; margin-top:-8px">@format.FormatName</button>
                    }
                </span>
            </div>
            <div>
                @foreach (var item in Model)
                { 
                    <div class="film-item filter-@item.Format.FormatName.ToLower()" style="width: 18%; height: 300px; display: inline-block; margin-left: 13px; margin-top: 13px">
                        <div style="border: solid; border-width: 1px">
                            <a href="/Home/Detail/?id=@item.FilmId" class="poster">
                                <img src="~/Image/FilmImage/@item.ImageURL" style="width:100%; height:255px">
                            </a>
                        </div>
                        <div style="height: 55px; font-size: larger;">
                            <a href="/Home/Detail/?id=@item.FilmId" style=" color: darkorange">@item.Name</a>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {       
        $(".filter-trigger").click(function () {
            var filterClass = $(this).attr("data-filterclass");
            $(".film-item").hide();
            $("." + filterClass).show();
        })
     })
</script>